<template>
  <el-row class="match-info">
    <el-col :span="4">
      <e-img-match class="logo" :src="data.logoUrl?data.logoUrl:'./static/images/trainImg.png'" />
    </el-col>
    <el-col :span="16">
      <h1 class="match-title">{{data.title}}</h1>
      <p class="text">{{data.text}}</p>
      <span :class="'type t'+data.merStatus"></span>
    </el-col>
    <el-col :span="4">
      <el-button
        type="primary"
        class="fr btn"
        @click="handleStop">放弃招商计划</el-button>
    </el-col>
  </el-row>
</template>
<script>
  import api from 'api/merchants'
  export default{
    props: {
      data: Object
    },
    methods: {
      handleStop () {
        this.$confirm('确定关闭该招商计划？', '提示', {
          type: 'warning'
        }).then(() => {
          // 执行删除接口
          api.merchants_del({
            id: this.data.id
          }).then(res => {
            this.$message({
              message: '成功关闭该招商计划！',
              type: 'success'
            })
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  
  .match-info {
    padding: 60px 20px 60px 60px;
    background-color: #fff;
    .logo{
      width: 100%;
      height: auto;
      max-height: 120px;
    }
    .match-title{
      margin-left: 30px;
      font-size:18px;
      color:#999;
      margin-bottom: 10px;
      line-height: 20px;
      height: 40px;
    }
    .text{
      color: $color-sub;
      font-size: 14px;
      margin-bottom: 20px;
    }
    .type{
      margin-left: 30px;
      border: 1px solid $color-warning;
      color: $color-warning;
      padding: 3px 5px;
      &.t1:after{
        content: '关闭招商';
      }
      &.t0:after{
        content: '正在招商';
      }
    }
    .btn{
      margin-top: 20px;
    }
  }
</style>
